<template>
  <a-modal
    :width="550"
    :visible="visible"
    title="罚没保证金"
    @cancel="onClose"
    @ok="onSubmit"
    ok-text="确定"
    :destroyOnClose="true"
  >
    <a-alert type="warning" style="margin-bottom: 20px">
      <template #description>
        <p>罚没金额不可大于应付金额并且不能小于0，但可以多次罚没。罚没金额会生成对应费用类型账单，退租审批自动和该退款保证金账单进行结转。</p>
      </template>
    </a-alert>
    <a-form layout="vertical">
      <a-row :wrap="true" :gutter="12">
        <a-col :span="24">
          <a-form-item label="罚没金额" v-bind="validateInfos.amount">
            <a-input-number
              class="w-100p"
              v-model:value="formData.amount"
              placeholder="请输入罚没金额"
              :min="0.01"
              :max="maxAmount"
              :precision="2"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            label="账单费用类型"
            v-bind="validateInfos.cost_type"
          >
            <a-cascader
              v-model:value="formData.cost_type"
              :options="costTypeList"
              :load-data="getCostTypeSub"
              placeholder="请选择"
              dropdownClassName="fee-type-cascader-custom"
              @change="costTypeChange"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            label="罚没原因"
            v-bind="validateInfos.reason"
          >
            <a-textarea
              v-model:value="formData.reason"
              placeholder="输入罚没原因"
              :rows="3"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";
import { Form, message } from "ant-design-vue";
import store from "../../../../store";
import request from "../../../../common/utils/request";
import _ from "lodash";
const useForm = Form.useForm;
export default defineComponent({
  name: "ForfeitModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    forfeitInfo: {
      type: Object,
      default: () => ({}), // id,max
    }
  },
  components: {},
  setup(props, { emit }) {
    const state = reactive({
      costTypeList: [],
      maxAmount: 0,
    });

    const formData = reactive({
      amount: 0,
      cost_type: undefined,
      cost_type_txt: '',
      reason: '',
    });
    const ruleRef = reactive({
      amount: [{ required: true, message: "必填" }],
      cost_type: [{ required: true, message: "必选" }],
    });

    const { resetFields, validate, validateInfos} = useForm(formData, ruleRef);

    const costTypeChange = (value, data) => {
      formData.cost_type_txt = data[data.length - 1].label;
    };

    const onSubmit = () => {
      validate().then(() => {
        let submitData = _.cloneDeep(formData);
        if (submitData.cost_type && submitData.cost_type.length == 2) {
          submitData.cost_type = submitData.cost_type[1];
        }
        emit("handleOk", submitData);
      });
    };

    const onClose = () => {
      emit("handleCancel");
    };

    const getCostTypeList = () => {
      request.get("/org", "/bill/cost/categoryList", {}).then((res) => {
        state.costTypeList = (res?.list || []).map((item) => ({
          label: item.name,
          value: item.id,
          isLeaf: false,
        }));
      });
    };

    const getCostTypeSub = (selectedOptions) => {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      request
        .get("/org", "/bill/costList", {
          page: 1,
          limit: 9999,
          category_id: targetOption.value,
          status: 1,
        })
        .then((res) => {
          if (res.list) {
            targetOption.loading = false;
            targetOption.children = res.list.map((item) => ({
              label: item.name,
              value: item.cost_type,
              isLeaf: true,
            }));
            state.costTypeList = [...state.costTypeList];
          }
        });
    };

    const init = () => {
      getCostTypeList();
      // 默认展示剩余金额
      let max = props.forfeitInfo?.max || 0;
      formData.amount = max;
      state.maxAmount = max;
    };

    const reset = () => {
      state.costTypeList = [];
      state.maxAmount = 0;
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          resetFields();
          reset();
        }
      }
    );

    return {
      ...toRefs(state),
      formData,
      validateInfos,
      onClose,
      onSubmit,
      getCostTypeSub,
      costTypeChange,
    };
  },
});
</script>

<style lang="less" scoped>
p {
  &:last-of-type {
    margin-bottom: 0;
  }
}
.user-tag :deep(.ant-tag) {
  border-radius: 20px !important;
  padding: 0 12px 0 0 !important;
  background: #f1f1f1;
  border: none;
}
:deep(.ant-alert-description) {
  font-size: 12px;
  p {
    margin-bottom: 6px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
:deep(.ant-alert-with-description.ant-alert-no-icon) {
  padding: 6px 10px;
}
</style>
